<template>
  <div class="sub-page-container container">
    <div style="max-width: 388px; padding: 12px">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="通知公告">
          <a-list :data="noticeList" :pagination-props="paginationProps" :bordered="false">
            <template #item="{ item }">
              <a-list-item class="list-item" action-layout="vertical">
                <a-list-item-meta>
                  <template #title>
                    <a-typography-text bold>{{ item.title }}</a-typography-text>
                  </template>
                  <template #avatar>
                    <a-avatar shape="square">
                      <img alt="avatar" :src="item.avatar" />
                    </a-avatar>
                  </template>
                  <template #description>
                    <div class="description_content">
                      <span class="time">{{ item.createdTime }}</span>
                      <span class="count">{{ item.readCount }}人读过</span>
                    </div>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>
        <a-tab-pane key="2" title="系统消息">Content of Tab Panel 2</a-tab-pane>
      </a-tabs>
    </div>
    <!-- 展示新闻详情 -->
    <div class="message-wrapper">
      <MessageDetail v-bind="noticeDetail" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import MessageDetail from './components/MessageDetail.vue';
import { MyMessageData, MyMessageRecord, MyMessageDetail, queryMessageList } from '@/api/my-message';
const noticeList = ref<MyMessageData[]>([]);
const noticeDetail = ref<MyMessageData & MyMessageDetail>({
  id: '',
  title: '消防宣传进高校 新生齐学防火课 兰州消防开展消防知识进高校活动',
  createdTime: '2021-12-01 17:23:15',
  publisher: '甘南藏族自治州教育局',
  readCount: '13',
  contents: [
    '近日，兰州消防宣传员走进西北师范大学，为新生开展了一场极具实用性、实效性的消防知识“进高校”活动。',
    '当天的活动中，消防宣传员走进校园，通过答题互动、安全提示、现场实操等形式，为新生们上了一堂生动的消防安全“开学第一课”。在答题互动环节，消防宣传员就在校园中如何预防校园火灾、如何查找火灾隐患、发生火灾时如何正确报警、火场如何逃生自救、日常生活中如何安全用火用电等基本消防知识进行问答，同学们踊跃答题，气氛活跃；在安全提示环节中，从多个角度阐述了校园消防安全教育的重要性，重点讲解了教室、食堂、实验室等不同场所的防、灭火要点，用火用电方面的注意事项，以确保校园消防安全；在现场实操环节，消防指战员组织学生代表逐一进行穿戴战斗服、操作灭火器等项目，让所有参训学生亲身体验灭火感受，从理论到实操全方位的学习消防知识，掌握消防技能。',
    '“以前只听说过灭火要用灭火器，但具体怎么使用还是不太清楚，原来真实操作起来有这么多注意事项。”“这个灭火防护服看起来又厚又热，但没想到穿起来像披了一层棉被，再加上空气呼吸器和腰上这个工具包非常重，要带着这些去救火，感觉很难。”“本来觉得自己肯定还可以，结果发现没有经过训练根本不可能像消防员穿战斗服穿的那么快，而且穿上防护服之后，行动都不太方便，太累了。”活动中，参与体验的师生分享了自己的感受。'
  ],
  attachments: [],
  avatar: ''
});
const paginationProps = ref<{
  defaultPageSize: number;
  showTotal: boolean;
  total: number;
}>({
  defaultPageSize: 5,
  total: 0,
  showTotal: true
});

onMounted(() => {
  queryList();
});

function queryList() {
  noticeList.value = Array.from({ length: 15 }).map((_, idx) => ({
    id: `${idx + 1}`,
    avatar: 'https://picsum.photos/200/300',
    title: `通知公告${idx + 1}`,
    createdTime: '2023-01-01',
    readCount: '10',
    publisher: '甘南藏族自治州教育局'
  }));
  paginationProps.value.total = noticeList.value.length;

  // queryMessageList({
  //   current: page,
  //   pageSize: 5
  // }).then(res => {
  //   noticeList.value = res.list;
  // });
}
</script>

<style scoped lang="less">
.container {
  display: flex;
}

.list-item {
  cursor: pointer;

  &:hover {
    background: #f5f5f5;
  }

  .count {
    color: #999;
    margin-left: 30px;
  }

  .time {
    color: #999;
  }

  .title {
    font-size: 16px;
    font-weight: 500;
  }
}

.arco-list-item.list-item {
  border: 1px solid #e5e5e5;
  margin-bottom: 12px;
  border-radius: 12px;
}

:deep(.arco-list-item-meta-content) {
  width: 100%;
}

.description_content {
  display: flex;
  justify-content: space-between;
}

.message-wrapper {
  display: flex;
  justify-content: center;
  flex: 1;
  margin-left: 60px;
}
</style>
